Interaktivne aplikacije na webu (SVG)

M. Turčić, T. Pavlović, M.Rudolf

Sažetak

SVG (Skalabilna vektorska grafika) je XML jezik za opis vektorske grafike, animacije i aplikacija. Prednost SVG-a je ta što se bazira na XML-u, univerzalnom i otvorenom formatu za razmjenu podataka sa svim platformama.
Ovaj rad pokazuje mogućnosti interakcije i kontrole (pokretanje i zaustavljanje) animacije SVG elemenata na zahtjev korisnika. Na primjeru metereološke karte Hrvatske prikazali smo kako SVG elementi međusobno komuniciraju, kako se mogu stvarati i brisati skriptnim jezikom, uz pomoć DOM-a.
Komunikacija se uspostavlja ugrađenim animacijskim elementima iz SVG-a s mogućnošću obogaćivanja skriptnim programskim jezicima koji daju neograničenu slobodu i kontrolu nad vektorskim elementima.
Zbog svojih vektorskih svojstava SVG dokumenti se mogu vizualno stvarati i uređivati u svim poznatijim vektorskim programima. SVG dopušta dizajnerima vektorsku fleksibilnost i kvalitetu prikaza na Web-u uz malu veličinu dokumenata, što rezultira optimalnim performansama preglednika.
Ključne riječi: SVG, XML, interaktivnost, animacija, JavaScript

Interactive applications on Web (SVG)

M. Turčić, T. Pavlović, M. Rudolf

Summary

Scalable Vector Graphics (SVG) is an XML application applicable in vector form on a variety of interfaces. The advantage of SVG is that it’s based on XML, a universal and open format for exchanging information on all platforms.
Our work shows possibilities of interaction and control over animation of SVG elements on demand. The example of Croatian weather map showed how SVG elements communicate, how they can be created and erased with a scripting language and DOM.
Communication is established through built in SVG animation elements with the possibility of integrating scripting languages that give control over the vector elements.
SVG documents can be designed and edited in all popular vector programs. SVG enables vector flexibility and quality of Web display with small documents that result in optimal browser performance.
Keywords: SVG, XML, interaction, animation, JavaScript

1. Uvod
Skalabilna Vektorska Grafika (SVG) namijenjena je novom pristupu prikaza grafike na Web-u. SVG je jezik otvorenog standarda za vektorsku grafiku na Web-u s visokom rezolucijom te elementima kao što su gradijenti, animacija i filteri koristeći se običnim tekst editorom za njihovu kreaciju. Donosi kvalitetan grafički dizajn na Web sa mogućnostima oblikovanja rasporeda grafičkih elemenata, izbora fontova, interaktivnosti i boja.
S obzirom da se bazira na XML-u, moguće su dinamičke interaktivnosti. SVG grafike mogu reagirati na akcije korisnika mijenjanjem boja i veličina, animacijama, povezivanjem na druge lokacije...
Zbog svoje kompatibilnosti sa skriptnim jezicima, moguće je pristupanje i manipuliranje svim SVG elementima JavaScript-om.

2. SVG kao dio XML-a
Skalabilna vektorska grafika (SVG) je W3C standard za grafiku baziranu na XML-u koji omogućuje da Web dokumenti budu manji, brži i interaktivniji. Pomoću SVG-a jednostavno se kreiraju vektorske grafike, ali i tekst, filteri, transformacije, animacije, povezivanje te integracija sa skriptnim jezicima kao što je JavaScript. Za razliku od bitmap formata (JPEG, GIF) SVG grafike su neovisne o rezoluciji i uređaju, stoga se mogu povećavati i smanjivati ovisno o veličini i vrsti ekrana (monitori, mobiteli).
SVG grafike su manje od bitmap dokumenata, time i brže za učitavanje.
Također, dizajnerima se pruža mogućnost kreiranja SVG grafika bez posebnog poznavanja koda jer većina vektorskih programa (Adobe Illustrator, Corel, Inkscape) podržava SVG format. Iako je kreiran za Web, jezik ima širok spektar uporaba kao što su: generiranje grafova i dijagrama od informacija spremljenih na raznim lokacijama; olakšava razmjenu grafika, od arhitektonskih nacrta do dijagrama menadžment projekata; kreiranje dijagrama koje korisnici mogu povećavati i pomicati; generiranje bitmap slika kao alternativa SVG dokumentu na starijim verzijama pretraživača; upravljanje grafikama koje podržavaju razne jezike ili prijevode; kreiranje kompleksnih animacija.
Zbog toga što je SVG baziran na XML-u, informacije o grafikama su spremljene kao razumljiv tekst, a koristi i prednosti XML-a, kao što su otvorenost, lakša prenosivost i razmjena. SVG dokument je pisan u XML-u te se time omogućuje dostupnost teksta bilo kojem korisničkom posredniku koji obrađuje XML.

3. Animacija
SVG uključuje svojstva animacije bazirane na specifikacijama Synchronized Multimedia Integration Language – SMIL. Međutim, za kompliciranije efekte koji uključuju događaje (events) moguće je efekte animacije dobiti putem DOM skriptnih tehnika. Deklarativnom SVG animacijom mogu se animirati boje, filter efekti, pokreti (povećavanje, smanjivanje, rotacija), kretanja po putu te animacije s različitim tempom.
Postoji više elemenata koji opisuju odrđene vrste animacija u SVG-u.
Element 'animate' se koristi pri animiranju jednog atributa ili svojsta kroz vrijeme.
Element 'set' pruža mogućnost određivanja vrijednosti atributa u određenom vremenu.
Element 'animateMotion' odabrani objekt pomiče po definiranom putu.
Element 'animateColor' mijenja boju objekta tijekom vremena.
Element 'animateTransform' kontrolira animaciju translacija, rotacija, povećavanja i smanjivanja te deformacija.
Atributi ovih elemenata kontroliraju početak i kraj animacije, njeno trajanje, broj ponavljanja i tempo animacije.
Ponekad nije moguće dobiti željene efekte deklarativnom animacijom koristeći SMIL pa se u tom slučaju efekti kreiraju koristeći kombinaciju JavaScript-a i DOM-a. Na primjer, ukoliko želimo animirati neskalarne atribute SVG elementa ili slučajnim odabirom promijeniti vrijednost atributa. Cijeli JavaScript kod potreban za animaciju se definira unutar SVG dokumenta što olakšava integraciju animacije u Web stranicu.

4. Interaktivnost
Sadržaj SVG dokumenta može biti interaktivan koristeći mogućnosti SVG jezika:
Akcije korisnika kao što su pritisak na gumb ili pomicanje miša, mogu pokrenuti animaciju ili pozvati skriptu.
Korisnik može pozvati hipervezu na novu Web stranicu raznim akcijama
Korisnici mogu povećavati ili pomicati SVG sadržaj.

4.1. Povezivanje
Najjednostavniji oblik interaktivnosti je povezivanje. U SVG-u je povezivanje omogućeno pomoću HTML tagova ili XLink jezika za povezivanje. Bilo koji SVG element (tekst, objekti, slike) može postati poveznica na drugu Web stranicu, SVG objekt ili početak animacije. Sukladno tome, ukoliko pomičemo strelicu miša preko obilježenog SVG objekta, ona će promijeniti izgled, nagovještajući poveznicu.
U SVG-u je vrlo jednostavno definirati i održavati poveznice jer se one mogu dinamički premiještati sa sadržajem SVG dokumenta.

4.2. Događaji (Events)
SVG podržava događaje kao što su : focusin, focusout, activate, click, mousedown, mouseup, mouseover, mousemove, mouseout.
Događajima možemo kontrolirati slijedeće:
koristeći SVG DOM poziva se skripte određenim događajem.
SVG uključuje atribute događaja odabranih elemenata koji definiraju skriptu pozvanu događajem.
SVG elementi animacije se mogu definirati tako da animacija započne ili završi na osnovi događaja.

5. Zaključak
SVG je W3C standard otvorenog tipa te time ne zahtjeva skupe alate za kreiranje. Zato što je baziran na XML-u, a može sadržavati JavaScript, DOM i druge tehnologije, prepoznatljiv je programerima i otvoren je za razvoj. SVG je kompatibilan sa HTML-om, GIF-om, JPEG-om, PNG-om, SMIL-om, CSS-om i mnogim drugim standardima. Grafike kreirane SVG-om su skalabilne te ne gube kvalitetu diljem platformi i uređaja pa se može koristiti na Web-u kao i na mobilnim uređajima.
Jedan od problema SVG-a je da je neophodan plug-in za njegovo prikazivanje na Web-u, koji najbolje funkcionira u Microsoft Internet Explorer-u i Netscape Navigator-u, ali još uvijek ne radi pouzdano sa Mozilla preglednikom.
Kroz naš primjer interaktivne metereološke karte Hrvatske pokazali smo kako se grafika u SVG-u jednostavno može kreirati pomoću poznatih vektorskih grafičkih programa kao što je Adobe Illustrator; kako se elementima može pristupiti preko DOM-a i JavaScripta te koristiti sve mogućnosti interaktivnosti pomoću događaja kojima pokrećemo animaciju.